import 'package:flutter/material.dart';

class LayoutMain extends StatelessWidget {
  const LayoutMain({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("常见控件"),
        ),
        body: const Padding(
          padding: EdgeInsets.all(15),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('这是一条居左的文字', textAlign: TextAlign.left),
              Text(
                "这是一条很长的文字这是一条很长的文字这是一条很长的文字这是一条很长的文字这是一条很长的文字这是一条很长的文字这是一条很长的文字这是一条很长的文字这是一条很长的文字",
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
              Text(
                '这是一条带样式的内容',
                style: TextStyle(
                    color: Colors.lightGreen,
                    fontSize: 20.0,
                    backgroundColor: Colors.yellow,
                    decoration: TextDecoration.underline,
                    decorationStyle: TextDecorationStyle.dashed),
              ),
              Text('下面是一条富文本信息'),
              Text.rich(TextSpan(children: [
                TextSpan(
                    text: '百度地址为：',
                    style: TextStyle(
                      fontSize: 22,
                    )),
                TextSpan(
                    text: 'https://www.baidu.com',
                    style: TextStyle(
                      color: Colors.cyan,
                      fontSize: 22,
                    ))
              ])),
            ],
          ),
        ));
  }
}

//按钮
class ButtonWidget extends StatelessWidget {
  const ButtonWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('按钮页面'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('ElevatedButton是一个带阴影圆角的按钮'),
          ElevatedButton(
            onPressed: () => Navigator.pop(context, '这里是返回值'),
            child: const Text('点击返回'),
          ),
          const Text('TextButton是一个默认背景透明并不带阴影。按下后，会有背景色'),
          TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('点击返回')),
          const Text('OutlineButton默认有一个边框，不带阴影且背景透明'),
          OutlinedButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('点击返回')),
          const Text('IconButton是一个可点击的Icon，不包括文字，默认没有背景'),
          IconButton(
              onPressed: () => Navigator.pop(context),
              icon: const Icon(Icons.thumb_up)),
          const Text('带图标的按钮'),
          ElevatedButton.icon(
            icon: const Icon(Icons.send),
            label: const Text("发送"),
            onPressed: () => Navigator.pop(context),
          ),
          OutlinedButton.icon(
            icon: const Icon(Icons.add),
            label: const Text("添加"),
            onPressed: () => Navigator.pop(context),
          ),
          TextButton.icon(
            icon: const Icon(Icons.info),
            label: const Text("详情"),
            onPressed: () => Navigator.pop(context),
          ),
        ],
      ),
    );
  }
}

//图片
class ImageWidget extends StatelessWidget {
  const ImageWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var img = const AssetImage("images/touxiang.png");
    return Scaffold(
        appBar: AppBar(title: const Text('图片')),
        body: SingleChildScrollView(
          child: Column(
              children: [
            Image(
              image: img,
              height: 50.0,
              width: 100.0,
              fit: BoxFit.fill,
            ),
            Image(
              image: img,
              height: 50,
              width: 50.0,
              fit: BoxFit.contain,
            ),
            Image(
              image: img,
              width: 100.0,
              height: 50.0,
              fit: BoxFit.cover,
            ),
            Image(
              image: img,
              width: 100.0,
              height: 50.0,
              fit: BoxFit.fitWidth,
            ),
            Image(
              image: img,
              width: 100.0,
              height: 50.0,
              fit: BoxFit.fitHeight,
            ),
            Image(
              image: img,
              width: 100.0,
              height: 50.0,
              fit: BoxFit.scaleDown,
            ),
            Image(
              image: img,
              height: 50.0,
              width: 100.0,
              fit: BoxFit.none,
            ),
            Image(
              image: img,
              width: 100.0,
              color: Colors.blue,
              colorBlendMode: BlendMode.difference,
              fit: BoxFit.fill,
            ),
            Image(
              image: img,
              width: 100.0,
              height: 200.0,
              repeat: ImageRepeat.repeatY,
            )
          ].map((e) {
            return Row(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: SizedBox(
                    width: 100,
                    child: e,
                  ),
                ),
                Text(
                  e.fit.toString(),
                  style: const TextStyle(fontSize: 15),
                )
              ],
            );
          }).toList()),
        ));
  }
}

//单选开关和复选框
class SwitchAndCheckBoxTestRoute extends StatefulWidget {
  const SwitchAndCheckBoxTestRoute({Key? key}) : super(key: key);

  @override
  _SwitchAndCheckBoxTestRouteState createState() =>
      _SwitchAndCheckBoxTestRouteState();
}

class _SwitchAndCheckBoxTestRouteState
    extends State<SwitchAndCheckBoxTestRoute> {
  bool _singleSwitchState = true;
  bool _checkboxState = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('单选复选框'),
      ),
      body: Column(
        children: [
          const Text('这是一个单选框'),
          Switch(
              value: _singleSwitchState,
              onChanged: (value) {
                setState(() {
                  _singleSwitchState = value;
                });
              }),
          const Text('这是一个复选框'),
          Checkbox(
              value: _checkboxState,
              activeColor: Colors.red,
              onChanged: (value) {
                setState(() {
                  _checkboxState = value!;
                });
              }),
        ],
      ),
    );
  }
}

// 输入框及表单
//主要属性
// const TextField({
//   ...
//   TextEditingController controller,
//   FocusNode focusNode,
//   InputDecoration decoration = const InputDecoration(),
//   TextInputType keyboardType,
//   TextInputAction textInputAction,
//   TextStyle style,
//   TextAlign textAlign = TextAlign.start,
//   bool autofocus = false,
//   bool obscureText = false,
//   int maxLines = 1,
//   int maxLength,
//   this.maxLengthEnforcement,
//   ToolbarOptions? toolbarOptions,
//   ValueChanged<String> onChanged,
//   VoidCallback onEditingComplete,
//   ValueChanged<String> onSubmitted,
//   List<TextInputFormatter> inputFormatters,
//   bool enabled,
//   this.cursorWidth = 2.0,
//   this.cursorRadius,
//   this.cursorColor,
//   this.onTap,
//   ...
// })

class TextFieldWidget extends StatefulWidget {
  const TextFieldWidget({Key? key}) : super(key: key);

  @override
  State<TextFieldWidget> createState() => _TextFieldWidgetState();
}

class _TextFieldWidgetState extends State<TextFieldWidget> {
  String _accountText = "";
  String _pwdText = "";

  final FocusNode _accountFocus = FocusNode();
  final FocusNode _pwdFocus = FocusNode();
  FocusScopeNode? focusScopeNode;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('输入框表单'),
      ),
      body: Column(
        children: [
          TextField(
            autofocus: true,
            focusNode: _accountFocus,
            decoration: const InputDecoration(
              labelText: '账号',
              hintText: '请输入账号',
              prefixIcon: Icon(Icons.person), // 未获得焦点下划线设为灰色
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.grey),
              ),
              //获得焦点下划线设为蓝色
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.lightGreen),
              ),
            ),
            keyboardType: TextInputType.emailAddress,
            onChanged: (value) {
              setState(() {
                _accountText = value;
              });
            },
          ),
          TextField(
              focusNode: _pwdFocus,
              decoration: const InputDecoration(
                labelText: "Email",
                hintText: "电子邮件地址",
                prefixIcon: Icon(Icons.email),
                border: InputBorder.none, //隐藏下划线
              ),
              obscureText: true,
              onChanged: (value) {
                setState(() {
                  _pwdText = value;
                });
              }),
          Text('输入账号内容: $_accountText'),
          Text('输入密码内容: $_pwdText'),
          ElevatedButton(
              onPressed: () {
                focusScopeNode ??= FocusScope.of(context);
                focusScopeNode?.requestFocus(_pwdFocus);
              },
              child: const Text('移动焦点')),
          ElevatedButton(
              onPressed: () {
                _accountFocus.unfocus();
                _pwdFocus.unfocus();
              },
              child: const Text('隐藏键盘'))
        ],
      ),
    );
  }
}

//表单
// 用户名不能为空，如果为空则提示“用户名不能为空”。
// 密码不能小于 6 位，如果小于 6 为则提示“密码不能少于 6 位”。
//autovalidate 是否自动校验输入内容
class FormTestRoute extends StatefulWidget {
  const FormTestRoute({Key? key}) : super(key: key);

  @override
  State<FormTestRoute> createState() => _FormTestRouteState();
}

class _FormTestRouteState extends State<FormTestRoute> {
  final GlobalKey _formKey = GlobalKey<FormState>();
  final TextEditingController _unameController = TextEditingController();
  final TextEditingController _pwdController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('输入框表单'),
      ),
      body: Form(
          key: _formKey,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          child: Column(
            children: [
              TextFormField(
                controller: _unameController,
                decoration: const InputDecoration(
                  labelText: '用户名',
                  hintText: '请输入用户名',
                  icon: Icon(Icons.person),
                ),
                validator: (v) {
                  return v!.trim().isNotEmpty ? null : '用户名不能为空';
                },
              ),
              TextFormField(
                controller: _pwdController,
                decoration: const InputDecoration(
                  labelText: '密码',
                  hintText: '请输入密码',
                  icon: Icon(Icons.lock),
                ),
                obscureText: true,
                validator: (e) {
                  return e!.trim().length >= 6 ? null : "密码不能少于 6 位";
                },
              ),
              // 登录按钮
              Padding(
                padding: const EdgeInsets.only(top: 20),
                child: Padding(
                    padding: const EdgeInsets.all(16),
                    child: ElevatedButton(
                      onPressed: () {
                        if ((_formKey.currentState as FormState).validate()) {
                          //验证通过提交数据
                          print('提交成功');
                        }
                      },
                      child: const Text('登录'),
                    )),
              )
            ],
          )),
    );
  }
}
